<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MQTT测试工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-panel {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 { color: #667eea; }
        h2 { color: #333; margin-top: 30px; }
        button {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            font-size: 14px;
        }
        button:hover {
            background: #5568d3;
        }
        .output {
            background: #1e1e1e;
            color: #00ff00;
            padding: 15px;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
            margin-top: 10px;
            max-height: 300px;
            overflow-y: auto;
        }
        .msg-box {
            background: #f9f9f9;
            padding: 10px;
            border-left: 3px solid #667eea;
            margin: 10px 0;
        }
        code {
            background: #f0f0f0;
            padding: 2px 6px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="test-panel">
        <h1>📡 MQTT测试工具</h1>
        <p>用于测试网页小程序的MQTT消息接收功能</p>
        
        <h2>1️⃣ 连接MQTT</h2>
        <button onclick="connectMqtt()">连接到 broker.emqx.io</button>
        <button onclick="disconnect()">断开连接</button>
        
        <h2>2️⃣ 发送测试消息</h2>
        
        <div class="msg-box">
            <strong>传感器数据（C语言网关格式）</strong>
            <button onclick="sendSensorData()">发送</button>
            <code>{"Tem":"25.5","Hum":"60.0","food":"100"}</code>
        </div>
        
        <div class="msg-box">
            <strong>温度过高</strong>
            <button onclick="sendHighTemp()">发送</button>
            <code>{"Tem":"35.0","Hum":"55.0"}</code>
        </div>
        
        <div class="msg-box">
            <strong>湿度过高</strong>
            <button onclick="sendHighHumid()">发送</button>
            <code>{"Tem":"22.0","Hum":"80.0"}</code>
        </div>
        
        <div class="msg-box">
            <strong>食物减少</strong>
            <button onclick="sendLowFood()">发送</button>
            <code>{"food":"20"}</code>
        </div>
        
        <div class="msg-box">
            <strong>设置消息</strong>
            <button onclick="sendSettings()">发送</button>
            <code>{"message_type":"settings","temp_threshold_max":40,...}</code>
        </div>
        
        <h2>📋 日志输出</h2>
        <div class="output" id="log"></div>
        <button onclick="clearLog()">清空日志</button>
    </div>
    
    <script src="https://unpkg.com/mqtt@5.3.4/dist/mqtt.min.js"></script>
    <script>
        let client = null;
        
        function log(msg) {
            const output = document.getElementById('log');
            const time = new Date().toLocaleTimeString('zh-CN');
            output.innerHTML += `[${time}] ${msg}\n`;
            output.scrollTop = output.scrollHeight;
        }
        
        function connectMqtt() {
            const url = 'ws://broker.emqx.io:8083/mqtt';
            const clientId = 'test_' + Math.random().toString(16).substring(2, 10);
            
            log('🔌 正在连接: ' + url);
            log('🆔 客户端ID: ' + clientId);
            
            client = mqtt.connect(url, {
                clientId: clientId,
                clean: true
            });
            
            client.on('connect', function() {
                log('✅ 连接成功！');
            });
            
            client.on('error', function(err) {
                log('❌ 错误: ' + err.message);
            });
        }
        
        function disconnect() {
            if (client) {
                client.end();
                client = null;
                log('🔌 已断开连接');
            }
        }
        
        function sendSensorData() {
            if (!client) {
                alert('请先连接MQTT！');
                return;
            }
            const msg = {
                "fd": "test",
                "Tem": "25.5",
                "Hum": "60.0",
                "food": "100"
            };
            sendMessage(msg);
        }
        
        function sendHighTemp() {
            if (!client) {
                alert('请先连接MQTT！');
                return;
            }
            const msg = {
                "fd": "test",
                "Tem": "35.0",
                "Hum": "55.0"
            };
            sendMessage(msg);
        }
        
        function sendHighHumid() {
            if (!client) {
                alert('请先连接MQTT！');
                return;
            }
            const msg = {
                "fd": "test",
                "Tem": "22.0",
                "Hum": "80.0"
            };
            sendMessage(msg);
        }
        
        function sendLowFood() {
            if (!client) {
                alert('请先连接MQTT！');
                return;
            }
            const msg = {
                "fd": "test",
                "food": "20"
            };
            sendMessage(msg);
        }
        
        function sendSettings() {
            if (!client) {
                alert('请先连接MQTT！');
                return;
            }
            const msg = {
                "message_type": "settings",
                "temp_threshold_max": 40,
                "temp_threshold_min": 10,
                "humid_threshold_max": 70,
                "humid_threshold_min": 30,
                "food_amount": 150
            };
            sendMessage(msg);
        }
        
        function sendMessage(msg) {
            const topic = 'McuToClient';
            const payload = JSON.stringify(msg);
            
            client.publish(topic, payload, function(err) {
                if (err) {
                    log('❌ 发送失败: ' + err.message);
                } else {
                    log('✅ 已发送到主题: ' + topic);
                    log('📦 消息: ' + payload);
                }
            });
        }
        
        function clearLog() {
            document.getElementById('log').innerHTML = '';
        }
    </script>
</body>
</html>

